import React, { Component } from 'react'
import { Route,Switch,Redirect } from 'react-router-dom'
import Home from './pages/Home/home'
import About from './pages/About/about'
import MyNavLink from './components/mynavlink/MyNavLink'
export default class App extends Component {
    /*
        1. link为跳转标签
        2. Route为放置路由组件的壳子
        3. BrowserRouter 包起整个app组件用于app内部的切换
        4. 路由组件与普通组件的区别
            1. 写法不同
                一般组件：<Home/>
                路由组件：<Route path="/home" component={Home}></Route>
            2. 存放位置不同
                一般组件：components
                路由组件：pages
            3. 接收到的信息不同
                一般组件：传递什么接收什么
                路由组件：props会有一个对象
        5. navlink 与 link 的区别
            1. navlink在切换时默认会加上active类 如果想防止类冲突 可以使用 activeClassName="xxx" 来使用选中时使用自己的类
        6.Switch 用于匹配相对应标签 如果其中路由组件有重用的路由名 则匹配第一个路由组件
        7.exact 放到Route标签中 用于严格匹配 用于场景 不出问题不用
        8.Redirect 重定向路由
        9.嵌套路由 
            1.注册子路由时要写上父路由的path值
            2.路由的匹配是按照注册路由的顺序决定的
        10. params 传参数
            路由链接(携带参数)： <Link to={`/home/demo2/detail/${v.id}/${v.title}`}>{v.title}</Link>
            注册路由(声明参数)： <Route path="/home/demo2/detail/:id/:title" component={Detail} /> 
            接收参数 this.props.match.params.XXX
    */
    render() {
        return (
            <div>
                    {/* <Link activeClassName="aaa" to="/about">about</Link> */}
                    <MyNavLink to="/about">about</MyNavLink>
                    {/* <br /> */}
                    {/* <MyNavLink to="/home">home</MyNavLink> */}
                    <MyNavLink to="/home/a/b">home</MyNavLink>
                    {/* 注册路由 */}
                <Switch>
                    <Route path="/about" component={About}></Route>
                    <Route path="/home" component={Home}></Route>
                    <Redirect to="/about"/>
                </Switch>
            </div>
        )
    }
}
